<template>
  <Transition name="fade">
    <div
      class="message-item"
      :style="{ '--level': message.level }"
      :class="{
        'message-item--system': message.role == 'system',
        'message-item--user': message.role == 'user',
      }"
    >
      <div class="user-avatar" v-if="message.type != 'time'">
        <slot name="avatar">
          <template v-if="message.role == 'user'">
            <img src="/icon/user.png" />
          </template>
          <template v-else-if="message.inputType == 'user_input'">
            <img src="/icon/tips.png" />
          </template>
          <template v-else-if="message.inputType == 'agent_steps'">
            <img src="/icon/todo.png" />
          </template>
          <template v-else-if="message.inputType == 'tool_output'">
            <img src="/icon/tool.png" />
          </template>
          <template v-else>
            <img src="/icon/ai.png" />
          </template>
        </slot>
      </div>

      <template v-if="message.role == 'system'">
        <template v-if="['html', 'doc'].includes(message.type)">
          <app-attachment
            :files="message.content"
            :type="message.type"
            @end="handleEnd"
            @click="handleFileClick"
          ></app-attachment>
        </template>
        <template v-else-if="['time'].includes(message.type)">
          <app-time :content="message.content"></app-time>
        </template>
        <template v-else-if="['agent_steps'].includes(message.type)">
          <app-steps :data="message.content" :message="message" @click="handleStepsClick"></app-steps>
        </template>
        <app-bubble
          v-else
          :content="message.content"
          :input-type="message.inputType"
          :type="message.type"
          :time="message.time"
          @end="handleEnd"
          :typing="{ setp: 2, interval: 50 }"
        >
        </app-bubble>
      </template>
      <template v-else>
        <app-bubble :content="message.content" role="user" />
      </template>
    </div>
  </Transition>
</template>

<script setup>
import Card from './Card.vue'

const { chatStore } = inject('/chat')
const { chatItemStore } = chatStore

const props = defineProps({
  message: Object,
})
const handleEnd = () => {
  // chatStore.messageQueue.next()
}

const handleFileClick = content => {
  let docId

  if (content.indexOf('[') != -1) {
    const match = props.message.content.match(/\['([^']+)'\]/)
    docId = match ? match[1] : null
  } else {
    docId = content
  }

  const msg = `@fetch_doc_content:${docId}`

  console.log('chatStore', chatStore)
  console.log('chatItemStore.value', chatItemStore.value)

  chatStore.state.dialog.preview.show = true
  chatStore.state.dialog.preview.data = {
    type: props.message.type,
    docId,
  }
  // chatItemStore.value.send(msg)
}

const handleStepsClick = item => {
  chatItemStore.value.state.taskId = item.message.rawTaskId + '-' + item.index
  console.log('chatItemStore.value.state.taskId', chatItemStore.value.state.taskId)
}
</script>
<style lang="scss" scoped>
.message-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding-left: calc(var(--level) * 2em);
}

.message-item--user {
  display: flex;
  // justify-content: flex-end;
  // 反向
  flex-direction: row-reverse;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.prompt-text {
  padding: 12px 16px;
  color: #999;
  font-style: italic;
}

.user-avatar {
  img {
    width: 36px;
    height: 36px;
  }
}
</style>
